<template>
  <FullscreenDataScreen :fullscreen="fullscreen">
    <div class="prediction-monitor-screen">
      <div class="screen-header">
        <div class="header-left">
          <div class="logo">
            <img src="@/assets/logo.png" alt="Logo" />
          </div>
          <div class="title">
            电信客户流失预警系统 - 预测监控大屏
            <!-- 在标题右侧放置返回按钮占位元素，仅在全屏模式下显示 -->
            <div v-if="fullscreen" class="back-button-placeholder"></div>
          </div>
        </div>
        <div class="header-center">
          <div class="time">{{ currentTime }}</div>
        </div>
        <div class="header-right">
          <!-- 添加全屏切换按钮 -->
          <el-button v-if="!fullscreen" size="small" type="primary" @click="enterFullscreen">
            <el-icon><FullScreen /></el-icon> 全屏
          </el-button>
        </div>
      </div>

      <div class="screen-content">
        <!-- 顶部统计指标 -->
        <div class="top-stats">
          <div class="stat-card">
            <div class="stat-icon model-icon">
              <el-icon><Cpu /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ modelStats.accuracy }}%</div>
              <div class="stat-label">模型准确率</div>
            </div>
            <div class="stat-trend up">
              <span>↑ {{ modelStats.accuracyTrend }}%</span>
            </div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon precision-icon">
              <el-icon><Aim /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ modelStats.precision }}%</div>
              <div class="stat-label">模型精确率</div>
            </div>
            <div class="stat-trend up">
              <span>↑ {{ modelStats.precisionTrend }}%</span>
            </div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon recall-icon">
              <el-icon><ZoomIn /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ modelStats.recall }}%</div>
              <div class="stat-label">模型召回率</div>
            </div>
            <div class="stat-trend down">
              <span>↓ {{ modelStats.recallTrend }}%</span>
            </div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon f1-icon">
              <el-icon><DataLine /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ modelStats.f1Score }}%</div>
              <div class="stat-label">F1 分数</div>
            </div>
            <div class="stat-trend up">
              <span>↑ {{ modelStats.f1Trend }}%</span>
            </div>
          </div>
        </div>
        
        <div class="main-content">
          <div class="left-section">
            <!-- 混淆矩阵 -->
            <div class="panel-item confusion-matrix-panel">
              <div class="panel-header">
                <div class="panel-title">混淆矩阵</div>
              </div>
              <div class="panel-content">
                <div class="chart-container" ref="confusionMatrixChart"></div>
              </div>
            </div>
            
            <!-- ROC曲线 -->
            <div class="panel-item roc-panel">
              <div class="panel-header">
                <div class="panel-title">ROC 曲线 (AUC: {{ modelStats.auc }})</div>
              </div>
              <div class="panel-content">
                <div class="chart-container" ref="rocChart"></div>
              </div>
            </div>
          </div>
          
          <div class="center-section">
            <!-- 预测结果分布 -->
            <div class="panel-item prediction-distribution-panel">
              <div class="panel-header">
                <div class="panel-title">预测结果分布</div>
              </div>
              <div class="panel-content">
                <div class="chart-container" ref="predictionDistChart"></div>
              </div>
            </div>
            
            <!-- 最近预测趋势 -->
            <div class="panel-item prediction-trend-panel">
              <div class="panel-header">
                <div class="panel-title">预测准确率趋势</div>
              </div>
              <div class="panel-content">
                <div class="chart-container" ref="predictionTrendChart"></div>
              </div>
            </div>
          </div>
          
          <div class="right-section">
            <!-- 特征重要性 -->
            <div class="panel-item feature-importance-panel">
              <div class="panel-header">
                <div class="panel-title">特征重要性排名</div>
              </div>
              <div class="panel-content">
                <div class="chart-container" ref="featureImportanceChart"></div>
              </div>
            </div>
            
            <!-- 实时预测监控 -->
            <div class="panel-item realtime-prediction-panel">
              <div class="panel-header">
                <div class="panel-title">实时预测监控</div>
              </div>
              <div class="panel-content">
                <div class="realtime-table">
                  <div class="table-header">
                    <div class="th customer-id">客户ID</div>
                    <div class="th prediction">预测结果</div>
                    <div class="th probability">概率</div>
                    <div class="th time">时间</div>
                  </div>
                  <div class="table-body">
                    <div v-for="(item, index) in realtimePredictions" :key="index" class="table-row">
                      <div class="td customer-id">{{ item.customerId }}</div>
                      <div class="td prediction">
                        <span :class="item.prediction ? 'churn' : 'stay'">{{ item.prediction ? '流失' : '留存' }}</span>
                      </div>
                      <div class="td probability">{{ item.probability }}%</div>
                      <div class="td time">{{ item.time }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="screen-footer">
        <div class="model-info">
          <span class="info-item">当前模型: <span class="highlight">XGBoost Ensemble v2.3</span></span>
          <span class="info-item">最近更新: <span class="highlight">2023-06-15 08:30:25</span></span>
          <span class="info-item">训练样本: <span class="highlight">45,768</span></span>
          <span class="info-item">测试样本: <span class="highlight">15,256</span></span>
        </div>
      </div>
    </div>
  </FullscreenDataScreen>
</template>

<script setup name="PredictionMonitorScreen">
import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import { debounce } from 'lodash-es'
import FullscreenDataScreen from '@/components/layout/FullscreenDataScreen.vue'
import { FullScreen, Cpu, Aim, ZoomIn, DataLine } from '@element-plus/icons-vue'
import { getPredictionMonitorData } from '@/api/modules/datascreen'

// 接收全屏模式参数
const props = defineProps({
  fullscreen: {
    type: Boolean,
    default: false
  }
})

const router = useRouter()

// 进入全屏模式
const enterFullscreen = () => {
  // 使用重定向到全屏路由
  router.push(`/fullscreen/datascreen/prediction`)
}

// 当前时间
const currentTime = ref(formatDateTime(new Date()))
let timer = null

// 数据状态
const predictionData = ref(null)
const loading = ref(false)

// 图表引用
const confusionMatrixChart = ref(null)
const rocChart = ref(null)
const predictionDistChart = ref(null)
const predictionTrendChart = ref(null)
const featureImportanceChart = ref(null)

// 图表实例
const charts = {
  confusionMatrix: null,
  roc: null,
  predictionDist: null,
  predictionTrend: null,
  featureImportance: null
}

// 计算属性
const modelStats = computed(() => {
  return predictionData.value?.modelStats || {
    accuracy: 92.7,
    accuracyTrend: 1.2,
    precision: 89.3,
    precisionTrend: 0.8,
    recall: 87.5,
    recallTrend: -0.4,
    f1Score: 88.4,
    f1Trend: 0.6,
    auc: 0.945
  }
})

const realtimePredictions = computed(() => {
  return predictionData.value?.realtimePredictions || [
    { customerId: 'C10087654', prediction: true, probability: 95.2, time: '10:45:32' },
    { customerId: 'C10087655', prediction: false, probability: 12.7, time: '10:44:18' },
    { customerId: 'C10087656', prediction: true, probability: 88.3, time: '10:43:05' },
    { customerId: 'C10087657', prediction: false, probability: 22.6, time: '10:41:57' },
    { customerId: 'C10087658', prediction: false, probability: 5.3, time: '10:40:43' },
    { customerId: 'C10087659', prediction: true, probability: 91.7, time: '10:39:21' },
    { customerId: 'C10087660', prediction: false, probability: 34.9, time: '10:38:09' },
    { customerId: 'C10087661', prediction: true, probability: 86.5, time: '10:37:22' },
    { customerId: 'C10087662', prediction: false, probability: 18.3, time: '10:36:15' },
    { customerId: 'C10087663', prediction: false, probability: 7.1, time: '10:35:02' }
  ]
})

// 格式化日期时间
function formatDateTime(date) {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 加载预测监控数据
const loadPredictionData = async () => {
  try {
    loading.value = true
    console.log('开始加载预测监控数据...')

    const response = await getPredictionMonitorData()
    console.log('预测监控数据响应:', response)

    if (response.success) {
      predictionData.value = response.data
      console.log('预测监控数据加载成功:', predictionData.value)

      // 重新初始化图表
      nextTick(() => {
        initAllCharts()
      })
    } else {
      throw new Error(response.message || '获取数据失败')
    }
  } catch (error) {
    console.error('加载预测监控数据失败:', error)
    ElMessage.warning('数据加载失败，使用模拟数据')

    // 使用默认数据
    predictionData.value = {
      modelStats: {
        accuracy: 92.7,
        accuracyTrend: 1.2,
        precision: 89.3,
        precisionTrend: 0.8,
        recall: 87.5,
        recallTrend: -0.4,
        f1Score: 88.4,
        f1Trend: 0.6,
        auc: 0.945
      },
      realtimePredictions: [
        { customerId: 'C10087654', prediction: true, probability: 95.2, time: '10:45:32' },
        { customerId: 'C10087655', prediction: false, probability: 12.7, time: '10:44:18' },
        { customerId: 'C10087656', prediction: true, probability: 88.3, time: '10:43:05' }
      ]
    }

    // 初始化图表
    nextTick(() => {
      initAllCharts()
    })
  } finally {
    loading.value = false
  }
}

// 初始化混淆矩阵图表
const initConfusionMatrixChart = () => {
  if (!confusionMatrixChart.value) return null

  const chart = echarts.init(confusionMatrixChart.value)
  
  const option = {
    tooltip: {
      position: 'top'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['预测留存', '预测流失'],
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisLabel: {
        color: '#fff'
      },
      splitArea: {
        show: true
      }
    },
    yAxis: {
      type: 'category',
      data: ['实际流失', '实际留存'],
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisLabel: {
        color: '#fff'
      },
      splitArea: {
        show: true
      }
    },
    visualMap: {
      min: 0,
      max: 5000,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      bottom: '0%',
      textStyle: {
        color: '#fff'
      },
      inRange: {
        color: ['#0a3b76', '#4ecdc4', '#ffc107', '#f56c6c']
      }
    },
    series: [{
      name: '混淆矩阵',
      type: 'heatmap',
      data: predictionData.value?.confusionMatrix ? [
        [0, 0, predictionData.value.confusionMatrix[1][1]], // 预测留存，实际流失 (FN)
        [0, 1, predictionData.value.confusionMatrix[0][0]], // 预测留存，实际留存 (TN)
        [1, 0, predictionData.value.confusionMatrix[1][0]], // 预测流失，实际流失 (TP)
        [1, 1, predictionData.value.confusionMatrix[0][1]]  // 预测流失，实际留存 (FP)
      ] : [
        [0, 0, 4236], // 预测留存，实际流失 (FN)
        [0, 1, 3897], // 预测留存，实际留存 (TN)
        [1, 0, 568],  // 预测流失，实际流失 (TP)
        [1, 1, 127]   // 预测流失，实际留存 (FP)
      ],
      label: {
        show: true,
        color: '#fff'
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  }
  
  chart.setOption(option)
  return chart
}

// 初始化ROC曲线图表
const initROCChart = () => {
  if (!rocChart.value) return null

  const chart = echarts.init(rocChart.value)
  
  // 使用真实数据或生成ROC曲线数据
  const rocData = predictionData.value?.rocData || (() => {
    const points = []

    // 起始点和结束点
    points.push([0, 0])

    // 生成中间点
    const steps = 50
    for (let i = 1; i < steps; i++) {
      // 创建一个向上弯曲的曲线，模拟ROC曲线
      const x = i / steps
      const y = Math.pow(x, 0.3)
      points.push([x, y])
    }

    // 添加结束点
    points.push([1, 1])

    return points
  })()
  
  // 生成对角线数据
  const diagonalLine = [
    [0, 0],
    [1, 1]
  ]
  
  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: function(params) {
        const data = params[0].data
        return `FPR: ${(data[0] * 100).toFixed(1)}%<br/>TPR: ${(data[1] * 100).toFixed(1)}%`
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      name: '假正例率 (FPR)',
      min: 0,
      max: 1,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisLabel: {
        color: '#fff',
        formatter: '{value}'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      },
      nameTextStyle: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'value',
      name: '真正例率 (TPR)',
      min: 0,
      max: 1,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisLabel: {
        color: '#fff',
        formatter: '{value}'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      },
      nameTextStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: 'ROC曲线',
        type: 'line',
        data: rocData,
        showSymbol: false,
        smooth: true,
        lineStyle: {
          width: 3,
          color: '#20a4f3'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(32, 164, 243, 0.5)' },
            { offset: 1, color: 'rgba(32, 164, 243, 0.1)' }
          ])
        }
      },
      {
        name: '对角线',
        type: 'line',
        data: diagonalLine,
        showSymbol: false,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.3)'
        },
        tooltip: {
          show: false
        }
      }
    ]
  }
  
  chart.setOption(option)
  return chart
}

// 初始化预测结果分布图表
const initPredictionDistChart = () => {
  if (!predictionDistChart.value) return null

  const chart = echarts.init(predictionDistChart.value)
  
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '预测结果',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['40%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#0a1023',
          borderWidth: 2
        },
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: predictionData.value?.predictionDistribution || [
          {
            value: 4804,
            name: '正确预测留存',
            itemStyle: { color: '#67c23a' }
          },
          {
            value: 568,
            name: '正确预测流失',
            itemStyle: { color: '#409eff' }
          },
          {
            value: 127,
            name: '错误预测流失',
            itemStyle: { color: '#e6a23c' }
          },
          {
            value: 329,
            name: '错误预测留存',
            itemStyle: { color: '#f56c6c' }
          }
        ]
      }
    ]
  }
  
  chart.setOption(option)
  return chart
}

// 初始化预测趋势图表
const initPredictionTrendChart = () => {
  if (!predictionTrendChart.value) return null

  const chart = echarts.init(predictionTrendChart.value)
  
  // 生成过去30天的日期标签
  const generateDates = () => {
    const dates = []
    const today = new Date()
    
    for (let i = 29; i >= 0; i--) {
      const date = new Date(today)
      date.setDate(today.getDate() - i)
      const month = date.getMonth() + 1
      const day = date.getDate()
      dates.push(`${month}-${day}`)
    }
    
    return dates
  }
  
  // 生成模拟准确率数据
  const generateAccuracyData = () => {
    const baseAccuracy = 90
    const data = []
    
    for (let i = 0; i < 30; i++) {
      // 添加一些波动
      const randomFactor = Math.random() * 6 - 3
      data.push(+(baseAccuracy + randomFactor).toFixed(1))
    }
    
    return data
  }
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '8%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: generateDates(),
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisLabel: {
        color: '#fff',
        fontSize: 10,
        interval: 4
      }
    },
    yAxis: {
      type: 'value',
      name: '准确率 (%)',
      min: 80,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisLabel: {
        color: '#fff',
        formatter: '{value}%'
      },
      nameTextStyle: {
        color: '#fff'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },
    series: [
      {
        name: '预测准确率',
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 3,
          color: '#ff7043'
        },
        showSymbol: false,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(255, 112, 67, 0.5)' },
            { offset: 1, color: 'rgba(255, 112, 67, 0.1)' }
          ])
        },
        data: generateAccuracyData()
      }
    ]
  }
  
  chart.setOption(option)
  return chart
}

// 初始化特征重要性图表
const initFeatureImportanceChart = () => {
  if (!featureImportanceChart.value) return null

  const chart = echarts.init(featureImportanceChart.value)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisLabel: {
        color: '#fff'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },
    yAxis: {
      type: 'category',
      data: ['合同类型', '月费用', '总费用', '使用期限', '互联网服务', '技术支持', '支付方式', '在线安全', '流媒体', '是否有伴侣'],
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisLabel: {
        color: '#fff',
        fontSize: 11
      }
    },
    series: [
      {
        name: '特征重要性',
        type: 'bar',
        data: [0.25, 0.18, 0.15, 0.12, 0.09, 0.07, 0.05, 0.04, 0.03, 0.02],
        itemStyle: {
          color: function(params) {
            const colorList = [
              '#f56c6c', '#fc8b40', '#fdc528', '#36cbcb', 
              '#4cabce', '#365b8c', '#2378f7', '#16a6ea', 
              '#4ecdc4', '#7ccd7c'
            ];
            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: colorList[params.dataIndex] },
              { offset: 1, color: echarts.color.lift(colorList[params.dataIndex], -0.2) }
            ]);
          },
          borderRadius: [0, 5, 5, 0]
        },
        label: {
          show: true,
          position: 'right',
          color: '#fff'
        }
      }
    ]
  }
  
  chart.setOption(option)
  return chart
}

// 更新时间
const updateTime = () => {
  currentTime.value = formatDateTime(new Date())
}

// 屏幕自适应
const handleResize = debounce(() => {
  Object.values(charts).forEach(chart => {
    if (chart) {
      chart.resize()
    }
  })
}, 200)

// 初始化所有图表
const initAllCharts = () => {
  charts.confusionMatrix = initConfusionMatrixChart()
  charts.roc = initROCChart()
  charts.predictionDist = initPredictionDistChart()
  charts.predictionTrend = initPredictionTrendChart()
  charts.featureImportance = initFeatureImportanceChart()
}

onMounted(async () => {
  // 加载数据
  await loadPredictionData()

  // 设置定时器
  updateTime()
  timer = setInterval(updateTime, 1000)

  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  clearInterval(timer)
  window.removeEventListener('resize', handleResize)
  
  // 销毁图表实例
  Object.values(charts).forEach(chart => {
    if (chart) {
      chart.dispose()
    }
  })
})
</script>

<style lang="scss" scoped>
.prediction-monitor-screen {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, #071a40, #0d1130);
  color: #fff;
  display: flex;
  flex-direction: column;
}

// 头部样式
.screen-header {
  height: 60px;
  background: rgba(11, 27, 61, 0.8);
  border-bottom: 1px solid rgba(0, 164, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 10px rgba(0, 123, 255, 0.3);
  z-index: 10;

  .header-left {
    display: flex;
    align-items: center;
    
    .logo {
      width: 40px;
      height: 40px;
      margin-right: 15px;
      
      img {
        width: 100%;
        height: 100%;
      }
    }
    
    .title {
      font-size: 22px;
      font-weight: bold;
      background: linear-gradient(to right, #00c6ff, #0072ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 10px rgba(0, 198, 255, 0.5);
      display: flex; /* 让标题和返回按钮在一行 */
      align-items: center; /* 垂直居中对齐 */
      
      .back-button-placeholder {
        width: 0; /* 不占用实际空间，只用于定位 */
        height: 36px;
        display: inline-block;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          width: 80px; /* 预留返回按钮的位置 */
          height: 100%;
        }
      }
    }
  }
  
  .header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    
    .time {
      font-size: 18px;
      font-weight: 500;
      color: #00f0ff;
      text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
    }
  }
  
  .header-right {
    .fullscreen-btn {
      cursor: pointer;
      font-size: 20px;
      color: #7fdbff;
      
      &:hover {
        color: #00f0ff;
      }
    }
  }
}

// 内容区域
.screen-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 10px;
  
  // 顶部统计卡片
  .top-stats {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    
    .stat-card {
      flex: 1;
      background: rgba(11, 35, 64, 0.7);
      border: 1px solid rgba(0, 164, 255, 0.4);
      border-radius: 5px;
      padding: 15px;
      display: flex;
      align-items: center;
      
      .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-right: 15px;
        
        &.model-icon {
          background: linear-gradient(135deg, #4ecdc4, #1a535c);
        }
        
        &.precision-icon {
          background: linear-gradient(135deg, #ff9500, #ff5e3a);
        }
        
        &.recall-icon {
          background: linear-gradient(135deg, #34bf49, #0a8043);
        }
        
        &.f1-icon {
          background: linear-gradient(135deg, #007aff, #5856d6);
        }
      }
      
      .stat-content {
        flex: 1;
        
        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: #fff;
        }
        
        .stat-label {
          font-size: 14px;
          color: #a7c9fe;
        }
      }
      
      .stat-trend {
        font-size: 14px;
        font-weight: bold;
        
        &.up {
          color: #67c23a;
        }
        
        &.down {
          color: #f56c6c;
        }
      }
    }
  }
  
  // 主要内容
  .main-content {
    display: flex;
    flex: 1;
    gap: 10px;
    
    // 面板通用样式
    .panel-item {
      background: rgba(11, 35, 64, 0.7);
      border: 1px solid rgba(0, 164, 255, 0.4);
      border-radius: 5px;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      
      .panel-header {
        height: 36px;
        display: flex;
        align-items: center;
        padding: 0 15px;
        background: rgba(0, 110, 255, 0.2);
        border-bottom: 1px solid rgba(0, 164, 255, 0.4);
        
        .panel-title {
          position: relative;
          padding-left: 10px;
          font-size: 16px;
          font-weight: bold;
          color: #7fdbff;
          
          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 16px;
            background: linear-gradient(to bottom, #00f0ff, #0072ff);
          }
        }
      }
      
      .panel-content {
        padding: 10px;
        flex: 1;
        display: flex;
      }
    }
    
    .left-section {
      width: 35%;
      display: flex;
      flex-direction: column;
      
      .confusion-matrix-panel {
        height: 45%;
      }
      
      .roc-panel {
        flex: 1;
      }
    }
    
    .center-section {
      width: 35%;
      display: flex;
      flex-direction: column;
      
      .prediction-distribution-panel {
        height: 50%;
      }
      
      .prediction-trend-panel {
        flex: 1;
      }
    }
    
    .right-section {
      width: 30%;
      display: flex;
      flex-direction: column;
      
      .feature-importance-panel {
        height: 55%;
      }
      
      .realtime-prediction-panel {
        flex: 1;
        
        .realtime-table {
          width: 100%;
          height: 100%;
          overflow-y: auto;
          
          .table-header {
            display: flex;
            font-weight: bold;
            border-bottom: 1px solid rgba(127, 219, 255, 0.3);
            padding: 8px 0;
            
            .th {
              text-align: center;
              color: #7fdbff;
            }
          }
          
          .table-row {
            display: flex;
            border-bottom: 1px solid rgba(127, 219, 255, 0.1);
            padding: 8px 0;
            
            &:last-child {
              border-bottom: none;
            }
            
            .td {
              text-align: center;
              
              .churn {
                color: #f56c6c;
                font-weight: bold;
              }
              
              .stay {
                color: #67c23a;
                font-weight: bold;
              }
            }
          }
          
          .customer-id {
            width: 30%;
          }
          
          .prediction {
            width: 20%;
          }
          
          .probability {
            width: 25%;
          }
          
          .time {
            width: 25%;
          }
        }
      }
    }
  }
}

// 底部区域
.screen-footer {
  height: 36px;
  background: rgba(11, 27, 61, 0.8);
  border-top: 1px solid rgba(0, 164, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  
  .model-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    
    .info-item {
      font-size: 14px;
      color: #a7c9fe;
      
      .highlight {
        color: #00f0ff;
        font-weight: bold;
        margin-left: 5px;
      }
    }
  }
}

// 图表容器通用样式
.chart-container {
  width: 100%;
  height: 100%;
}
</style> 